<template>
    <div class="main-con editStoreGoodsSaleSummary">
        <!-- 顶部导航 -->
        <div class="breadcrumb-con">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/index/storeGoodsSaleSummary' }">线上销售汇总</el-breadcrumb-item>
                <el-breadcrumb-item>{{ editText }}线上销售汇总</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <!-- 搜索框 -->
        <div class="search-con">
            <div class="search-item">
                <div class="search-item-title">门店名称</div>
                <div class="search-item-input">
                    <el-input size="mini" v-model="detialStoreName" disabled></el-input>
                </div>
            </div>
            <div class="search-item">
                <div class="search-item-title">商品名称</div>
                <div class="search-item-input">
                    <el-input size="mini" v-model="detialGoodsName" disabled></el-input>
                </div>
            </div>
            <div class="search-item">
                <div class="search-item-title">单位</div>
                <div class="search-item-input">
                    <el-input size="mini" v-model="detialUnit" disabled></el-input>
                </div>
            </div>
            <div class="search-item">
                <div class="search-item-title">商品规格</div>
                <div class="search-item-input">
                    <el-input size="mini" v-model="detialSpecification" disabled></el-input>
                </div>
            </div>
        </div>

        <!-- 表格数据 -->
        <div class="table-con" v-loading="loading">
            <el-table :data="tableData" size="mini" :header-cell-style="{background:'#f8f8f8'}" style="width: 100%">
                <el-table-column type="index" label="序号" width="50" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="tid" label="订单编号" width="" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="source" label="订单来源" width="" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="num" label="销售数量" width="" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="totalQuantity" label="总数" width="" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="placeOrderTime" label="下单时间" width="" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="deliveryEndTime" label="期望到达时间" width="" align="center" :show-overflow-tooltip="true">
                </el-table-column>
            </el-table>
        </div>

        <!-- 表格分页 -->
        <div class="pagination-con">
            <m-pagination :currentPage="formData.pageNum" :pageSize="formData.pageSize" :total="total"
                @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange">
            </m-pagination>
        </div>
    </div>
</template>

<script>
import { queryGoodsSaleSummaryDetialInfo } from "@/common/service/salesManagement/storeGoodsSaleSummary.js";
import mPagination from "@/components/m-pagination/m-pagination";
export default {
    name: "editStoreGoodsSaleSummary",
    data() {
        return {
            editType: "", //操作类型  detail=查看
            editText: "", //操作文字
            editId: "", //操作的id
            editData: "", //操作的数据
            //搜索条件
            formData: {
                storeId: "",
                itemId: "",
                pageNum: 1,
                pageSize: 10
            },
            //表格数据
            tableData: [], //表格信息
            total: null, //表格总条数
            loading: false, //表格加载动画

            detialStoreName: "", //门店名称
            detialGoodsName: "", //商品名称
            detialUnit: "", //单位
            detialSpecification: "" //商品规格
        };
    },
    created() {
        this.editType = this.$route.query.editType;
        this.editText = this.$route.query.editText;
        if (this.editType == "detail") {
            this.editData = JSON.parse(localStorage.getItem("editData"));
            this.formData.storeId = this.editData.storeId;
            this.formData.itemId = this.editData.itemId;
            this.detialStoreName = this.editData.storeName;
            this.detialGoodsName = this.editData.itemName;
            this.detialUnit = this.editData.unitName;
            this.detialSpecification = this.editData.saleValue;
            this._queryGoodsSaleSummaryDetialInfo();
        }
    },
    methods: {
        /*----------------------------查询操作----------------------------*/
        //查询骑手派单数据信息表格数据
        _queryGoodsSaleSummaryDetialInfo() {
            this.loading = true;
            queryGoodsSaleSummaryDetialInfo(this.formData)
                .then(res => {
                    this.loading = false;
                    this.tableData = res.content;
                    this.total = res.totalElements;
                })
                .catch(err => {
                    this.loading = false;
                    this.$message.error(err.message);
                });
        },
        //页码切换
        handleCurrentChange(val) {
            this.formData.pageNum = val;
            this._queryGoodsSaleSummaryDetialInfo();
        },
        //每页展示条数的切换
        handleSizeChange(val) {
            this.formData.pageSize = val;
            this._queryGoodsSaleSummaryDetialInfo();
        }
    },
    components: {
        "m-pagination": mPagination
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.table-con {
    margin-top: 10px;
}
</style>